<div class="products-list">
    <?php foreach ($products as $product): ?>
        <div class="product-placeholder">
            <div class="product-image">
                <div>
                    <?php if (!isset($noOverlay) || $noOverlay == false): ?>
                        <?php
                        //$image = Util::getThumbnailImage($product['image'], $thumbnail_size);
                        if (1) {
                            echo '<img class="overlay" rel="#product-overlay',
                            '" id="featured-image-', $product['id'],
                            '" src="', $product['image'],
                            '" />';
                        }
                        ?>
                        <script type="text/javascript">
                            jQuery(function(){
                                jQuery('#featured-image-<?php echo $product['id'] ?>').click(function(){
                                    jQuery.ajax({
                                        url: '<?php echo $this->createUrl('product/ajaxView', array('id' => $product['id'])); ?>',
                                        beforeSend: function() {
                                            jQuery('#product-overlay .overlay-content').html('<?php
                echo
                '<div class="controls">',
                '<div class="images scrollable">',
                '<div class="items">',
                '<div class="item">',
                '<div>',
                '<img src="', Yii::app()->request->baseUrl, '/css/img/ajax-loader.gif" />',
                '</div>',
                '</div>',
                '</div>',
                '</div>',
                '</div>'
                ?>');
                                },
                                success: function(html){
                                    jQuery('#product-overlay .overlay-content').html(html);
                                }
                            });
                        });
                    });
                        </script>
                    <?php else: ?>
                        <a href="<?php echo $this->createUrl('product/view', array('id' => $product['id'])) ?>">
                            <?php Util::thumbnailImage($product['image'], $thumbnail_size) ?>
                        </a>
                    <?php endif ?>
                </div>
            </div>
            <div class="product-name">
                <a href="<?php echo $this->createUrl('product/view', array('id' => $product['id'])) ?>">
                    <?php echo CHtml::encode($product['name']);
                    ?>
                </a>
            </div>
            <div class="product-price">
                <strong>
                    <?php echo CHtml::encode (number_format($product['price'],0,'','.') ); ?> 
                    <span>đ</span>
                </strong>
            </div>
            <div class="product-price product-button-add">
                <?php $btn_cart = 'btn_' . $product['id']; ?>
                <a productId="<?php echo $product['id']; ?>" productName="<?php echo $product['name'] ?>" productPrice="<?php echo $product['price'] ?>" productPromotion="<?php echo $product['promotion']; ?>" id="<?php echo $btn_cart ?>" class="btn btn-warning add_to_cart_btn btn_add_cart" href="#">
                    Thêm vào giỏ hàng
                </a>
            </div>

        </div>
    <?php endforeach ?>
</div>
<?php if (!isset($noOverlay) || $noOverlay == false): ?>
    <div class="pagging">
        <div>
            <?php
            $this->widget('CLinkPager', array(
                'pages' => $pages,
            ))
            ?>
        </div>
    </div>
    <div class="product-overlay" id="product-overlay">
        <div class="overlay-content" style="width: 100%; height: 100%;">
        </div>
    </div>
    <script type="text/javascript">
        var IDS = new Array();
    <?php foreach ($products as $product): ?>
            IDS.push(<?php echo $product['id'] ?>);
    <?php endforeach ?>
                
        var CURRENT = -1;
        function hasNextID() {
            if (CURRENT < (IDS.length - 1)) {
                return true;
            }
            return false;
        }
        function hasPreviousID() {
            if (CURRENT > 0) {
                return true;
            }
            return false;
        }

        jQuery(window).load(function() {
            jQuery("img[rel].overlay").overlay({
                mask: '#000',
                effect: 'apple',
                top: 20,
                fixed: true
            });
        });
                
    </script>
    <?php


 endif ?>